<template>
    <div class="login-container">
        <div class="login-logo">
            <img class="logo-img" src="https://images.hzsyoudong.com/shunshun-logo.png" alt="" />
            <span class="logo-name">{{ title }}</span>
        </div>
        <div class="login-form">
            <el-form ref="loginForm" :model="form" :rules="rules" label-position="left">
                <div class="form-title">账号密码登录</div>
                <el-form-item style="margin-top: 38px" prop="username">
                    <el-input v-model="form.username" placeholder="请输入手机号" tabindex="1" type="text" />
                </el-form-item>
                <el-form-item style="margin-top: 24px" prop="password">
                    <el-input ref="password" :key="passwordType" v-model="form.password" :type="passwordType" tabindex="2" placeholder="请输入密码" @keyup.enter.native="handleLogin" />
                    <span class="icon-container password" v-if="passwordType === 'password'" @click="handlePassword">
                        <i class="iconfont admin-icon-yincangmima"></i>
                    </span>
                    <span class="icon-container password" v-else @click="handlePassword">
                        <i class="iconfont admin-icon-xianshimima"></i>
                    </span>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-btn" type="primary" size="mini" :disabled="!(form.username && form.password)" :loading="loading" @click="handleLogin"> 登录 </el-button>
                </el-form-item>
                <!-- <div class="form-privacy">
                    <el-checkbox v-model="checkedPrivacy">
                        <p class="privacy" @click.prevent>
                            <span class="privacy-tip">我已阅读并同意</span>
                            <span class="privacy-name" @click="checkPrivacy">《丹企寄隐私政策》</span>
                        </p>
                    </el-checkbox>
                </div> -->
            </el-form>
        </div>
        <!-- <div class="login-foot">
            <p class="foot-copyright">丹企寄 版权所有 Copyright ©2023 sf-express.com Inc. All rights reserved.</p>
            <p class="foot-copyright icp">粤ICP 备08034243号</p>
        </div> -->
    </div>
</template>

<script>
import { isPassword } from '@/utils/validate'
export default {
    name: 'Login',
    computed: {
        title() {
            return this.$store.getters.settings.title
        }
    },
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!value) {
                callback(new Error('手机号不能为空'))
            } else {
                callback()
            }
        }
        const validatePassword = (rule, value, callback) => {
            if (!isPassword(value)) {
                callback(new Error('密码密码由6-18位数字和英文组成'))
            } else {
                callback()
            }
        }
        return {
            form: {
                username: '',
                password: '',
                grant_type: 'shunshunExpressBasWebPassword'
            },
            rules: {
                username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
                password: [{ required: true, trigger: ['blur', 'change'], validator: validatePassword }]
            },
            loading: false,
            passwordType: 'password',
            checkedPrivacy: true
        }
    },
    methods: {
        // 查看密码
        handlePassword() {
            this.passwordType === 'password' ? (this.passwordType = '') : (this.passwordType = 'password')
            this.$nextTick(() => {
                this.$refs.password.focus()
            })
        },
        // 登录
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    if (!this.checkedPrivacy) return this.$message_tip('请点击阅读并同意隐私政策', 'warning')
                    this.loading = true
                    this.$store.dispatch('user/login', this.form).then(() => {
                        this.$router.push({ path: '/dashboard' })
                        this.loading = false
                    }).catch(() => {
                        this.loading = false
                    })
                }
            })
        },
        checkPrivacy() {
            console.log(1);
        }
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    width: 100%;
    min-width: 468px;
    height: 100vh;
    background: url('https://images.hzsyoudong.com/fengqiji-login-bg.png') no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 30px;
    position: relative;
    .login-logo {
        position: absolute;
        top: 17px;
        left: 28px;
        display: flex;
        align-items: center;
        .logo-img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
        }
        .logo-name {
            color: #000000;
            font-size: 16px;
            margin-left: 10px;
        }
    }

    .login-foot {
        width: 100%;
        position: absolute;
        bottom: 30px;
        left: 0;
        .foot-copyright {
            font-size: 14px;
            font-weight: 400;
            color: #141222;
            line-height: 18px;
            text-align: center;
        }
    }

    .login-form {
        width: 100%;
        max-width: 416px;
        padding: 48px 48px 54px 48px;
        background-color: #ffffff;
        overflow: hidden;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px 12px 12px 12px;

        .form-title {
            font-size: 20px;
            font-weight: bold;
            color: #141222;
        }

        .login-btn {
            width: 100%;
            height: 40px;
            margin-top: 32px;
            border: 0;
        }

        .icon-container {
            position: absolute;
            top: 7.5px;
            right: 12px;
            z-index: 999;
            cursor: pointer;
            user-select: none;
            display: inline-block;
            i {
                font-size: 18px;
                color: #d7dee3;
            }
        }

        .form-privacy {
            .privacy {
                font-size: 14px;
                font-weight: 400;
                color: #999999;
                line-height: 18px;
                .privacy-name {
                    color: $--color-danger;
                }
            }
        }
    }

    ::v-deep {
        .el-form-item {
            padding-right: 0;
            margin: 24px 0;
            border-radius: 4px;

            &__error {
                font-size: 12px;
                line-height: 18px;
                color: #ff4d4f;
            }
        }

        .el-input {
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
            input {
                height: 48px;
                line-height: 48px;
                font-size: 14px;
                color: #999999;
            }
        }
    }
}
</style>
